<template>
  <el-popover
    popper-class="mp-micro"
    placement="bottom"
    :width="width"
    height="300"
    v-model="visible"
    trigger="click">
    <div class="default-popver">
      <div class="popver-head">
        <div
          class="tabs-item"
          v-for="(tab, index) in tabs"
          :key="index"
          :style="{borderBottom: currActive === tab.type ? '2px solid #1e63f5' : ''}"
          @click.stop="changeTab(tab)">{{tab.name}}</div>
        </div>
      <el-row>
        <moSelect
          :data="currentTab.list"
          :value="value"
          :defaultProps="currentTab.defaultProps"
          @handleClickNode="handleClickNode"
          :showCheckbox="isCheckbox">
        </moSelect>
      </el-row>
    </div>
    <inputContent :clear="clear" :visible="visible" :selected="tags.length" slot="reference" :multiRow="true">
        <el-tag v-for="one in tags" class="tag" :key="one.id" size="small"><span class="ellipsis">{{one && one.name}}</span></el-tag>
    </inputContent>
  </el-popover>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import inputContent from '@/afterSales/components/select/inputContent.vue';
import moSelect from '@/afterSales/components/moSelect/index.vue';
import deptTree from '@/afterSales/components/depTree/index.vue'
@Component({
  name: 'optionalScope',
  components: {
    inputContent,
    moSelect,
    deptTree
  }
})
export default class extends Vue {
  @Prop() public value!: any
  @Prop(Object) public fieldType!: string
  @Prop({ default: () => [] }) public tabs!: any[]
  @Prop({ default: true }) public isCheckbox!: boolean
  @Prop({ default: 290 }) public width!: number
  private visible = false
  private currActive = ''
  private currentTab: any = {}
  private changeTab (tab) {
    this.currActive = tab.type
    this.currentTab = tab
  }

  private get tags () {
    let arr: any = []
    if (this.value) {
      this.tabs.map(({ type, listMap, defaultProps }) => {
        if (listMap[this.value]) {
          const name = (listMap[this.value] && listMap[this.value][defaultProps.name]) || ''
          arr = [{ name, value: this.value, type }]
        }
      })
    }
    this.$emit('validateField')
    return arr
  }

  private clear () {
    this.$emit('changeValue', '')
    this.$emit('changeFlowType', this.currActive === 'technology' ? 4 : 5)
  }

  private handleClickNode (id) {
    this.$emit('changeValue', id)
    this.$emit('changeFlowType', this.currActive === 'technology' ? 4 : 5)
  }

  private beforeMount () {
    this.changeTab(this.tabs[0])
  }
}
</script>

<style lang="stylus">
.popver-head
  border-bottom: 1px solid #e6e6e6;
  margin-bottom 10px
  .tabs-item
    line-height: 40px;
    display: inline-block;
    cursor: pointer;
    padding: 0px 10px;
</style>
